<template>
  <el-menu
    ref="menuContainerRef"
    class="menu-container flex-grow"
    background-color="#001529"
    text-color="rgba(255, 255, 255, 0.65)"
    :default-active="defaultActive"
    :collapse="isCollapse"
    unique-opened
    router
    @select="handleSelect"
  >
    <menu-item v-for="item in menuList" :key="item.path" :item="item"></menu-item>   
  </el-menu>
</template>
<script>
import { reactive, toRaw, computed, watch, ref } from "vue";
import MenuItem from "../MenuItem"
import {useStore} from 'vuex'
export default {
  name: "MenuName",
  components: {MenuItem},
  setup() {
    const store = useStore()
    const state = reactive({
        isCollapse: computed(()=>store.getters.getIsCollapse),
        defaultActive: computed(()=>store.getters.getRoutePath), //获取监听路由path
        menuList: computed(()=>store.getters.getMenuList), //获取监听路由path
    })
    const handleSelect = (index, indexPath) => {
        // console.log(index, indexPath)
        // 存储indexPath,用于面包屑展示
        store.commit('setIndexPath', indexPath)
    }

    // 问题: element框架中 菜单展开菜单后，将菜单进行折叠后，在打开，之前打开的菜单没有自动展开
    // 解决办法：监听isCollapse,当折叠后打开时,获取菜单实例，进行菜单默认展开
    const menuContainerRef = ref(null)
    watch(()=>state.isCollapse, newVal => {
      if(!newVal){
        setTimeout(()=>{
          let arr = store.getters.getIndexPath
          let arr2 = arr.slice(0, arr.length-1)
          if(arr2.length){
            menuContainerRef.value.open(arr2)
          }
        }, 500)
      }
    })
    return {
        ...toRaw(state),
        menuContainerRef,
        handleSelect,
    }
  },
};
</script>
<style scoped>
.menu-container{
  width: 100%;
  border: none;
}
</style>